<%--
  Created by IntelliJ IDEA.
  User: xxswh
  Date: 2021/3/14
  Time: 10:53
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" type="text/css" href="css/Entry.css"/>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.css"/>
</head>
<body>
<img class="img" src="images/酒店.jpg"/>
<div class="topleft">&emsp;
    <span style="color: #00FFFF">
		        <i class="fa fa-map-marker" aria-hidden="true"></i>&nbsp;当前位置：
		        <span style="color:red;">首页</span>
		    </span>
    ​</div>
<div class="content1">书中自有黄金屋<br>书中自有颜如玉</div>
<div class="welcome">欢迎进入图书管理系统</div>

<div class="entry">
		  	<span class="denglu" data-toggle="modal" data-target="#myModal1">
		    	快速登录
		  	</span>
            <span class="zhuce" data-toggle="modal" data-target="#myModal2">
		  		新用户注册
		  	</span>
</div>
<!-- 模态框 -->
<div class="modal fade" id="myModal1">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- 模态框主体 -->
            <div class="modal-body">
                <div class=" nav ">
                    <div class="title">
                        欢迎来到图书管理系统登录
                    </div>

                    <div class="tab-content title-content">
                        <div id="home" >
                            <form action="userLogin" method="post">
                            <div class="input-group ">
                                <b>账号：</b><input type="text"  id="username"  name="nickName" placeholder="请输入您的昵称" style="width: 250px;">
                                &emsp;<span id="u-tip" style="color:red;"></span>
                            </div>
                            <br>
                            <div class="input-group"	            >
                                <b>密码：</b><input type="password"  id="password"  name="password" placeholder="请输入密码" style="width: 250px;"/>
                                &emsp;<span id="p-tip" style="color:red;"></span>
                            </div>
                                <div class="input-group"	            >
                                    <b>验证码：</b><input type="text"  id="password"  name="authcode" placeholder="请输入验证码" style="width: 250px;"/>
                                    &emsp;<span id="p-tip" style="color:red;"></span>
                                    <img style="width: 90px;" name="imgValidate" id="imgValidateLogin" src="validatelogin.jsp" onclick="refreshLogin()"/>
                                </div>
                            <br>
                            <button type="submit" class="btn btn-primary btn-lg btn-block btn-success">登录 </button>
                            </form>
                            <br />
                            <div  class="input-group">
                                <input type="checkbox" value="" style="cursor:pointer">记住密码
                                <input type="checkbox" value="" style="margin-left:50px;cursor:pointer">自动登录
                            </div>

                            <div class="input-group " style="color:#3BBA7D">
                                使用第三方账号直接登 ：
                                <br /><br />
                                <i class="fa fa-qq border" aria-hidden="true" style="color:royalblue;border:2px solid royalblue ;"></i>&emsp;
                                <i class="fa fa-weixin border" aria-hidden="true" style="color:forestgreen;border:2px solid forestgreen ;"></i>&emsp;
                                <i class="fa fa-weibo border" aria-hidden="true" style="color:red;border:2px solid red ;"></i>
                            </div>
                        </div>
                    </div>
                    <!-- 模态框底部 -->
                    <div class="modal-footer">
                        <button type="button" class="btn  btn-default btn-warning" data-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>





<div class="modal fade" id="myModal2">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- 模态框主体 -->
            <div class="modal-body">
                <div class=" nav ">
                    <div class="title">
                        欢迎来到图书管理系统注册
                    </div>

                    <div class="tab-content title-content">
                        <div id="home" >
                            <form action="userRegister" method="post">
                                <div class="input-group ">
                                    <b>昵称：</b><input type="text"  id="username"  name="nickName" placeholder="请输入您的昵称" style="width: 250px;">
                                    &emsp;<span id="u-tip" style="color:red;"></span>
                                </div>
                                <br>
                                <div class="input-group">
                                    <b>密码：</b><input type="password"  id="password"  name="password" placeholder="请输入密码" style="width: 250px;"/>
                                    &emsp;<span id="p-tip" style="color:red;"></span>
                                </div>
                                <br>
                                <div class="input-group ">
                                    <b>用户名：</b><input type="text"  id="username"  name="userName" placeholder="请输入您的用户名" style="width: 250px;">
                                    &emsp;<span id="u-tip" style="color:red;"></span>
                                </div>
                                <br>
                                <div class="input-group ">
                                    <b>邮箱：</b><input type="text"  id="username"  name="email" placeholder="请输入您的邮箱" style="width: 250px;">
                                    &emsp;<span id="u-tip" style="color:red;"></span>
                                </div>
                                <br>
                                <div class="input-group ">
                                    <b>性别：</b><input type="text"  id="username"  name="sex" placeholder="请输入您的性别" style="width: 250px;">
                                    &emsp;<span id="u-tip" style="color:red;"></span>
                                </div>
                                <br>
                                <div class="input-group ">
                                    <b>年龄：</b><input type="text"  id="username"  name="age" placeholder="请输入您的年龄" style="width: 250px;">
                                    &emsp;<span id="u-tip" style="color:red;"></span>
                                </div>
                                <br>
                                <div class="input-group">
                                    <b>验证码：</b><input type="text"  id="password"  name="authcode" placeholder="请输入验证码" style="width: 250px;"/>
                                    &emsp;<span id="p-tip" style="color:red;"></span>
                                    <img style="width: 90px;" name="imgValidate" id="imgValidateRegister" src="validatelogin.jsp" onclick="refreshRegister()"/>
                                </div>
                                <button type="submit" class="btn btn-primary btn-lg btn-block btn-success">注册 </button>
                            </form>
                            <br />
<%--                            <div  class="input-group">--%>
<%--                                <input type="checkbox" value="" style="cursor:pointer">记住密码--%>
<%--                                <input type="checkbox" value="" style="margin-left:50px;cursor:pointer">自动登录--%>
<%--                            </div>--%>

<%--                            <div class="input-group " style="color:#3BBA7D">--%>
<%--                                使用第三方账号直接登 ：--%>
<%--                                <br /><br />--%>
<%--                                <i class="fa fa-qq border" aria-hidden="true" style="color:royalblue;border:2px solid royalblue ;"></i>&emsp;--%>
<%--                                <i class="fa fa-weixin border" aria-hidden="true" style="color:forestgreen;border:2px solid forestgreen ;"></i>&emsp;--%>
<%--                                <i class="fa fa-weibo border" aria-hidden="true" style="color:red;border:2px solid red ;"></i>--%>
                            </div>
                        </div>
                    </div>
                    <!-- 模态框底部 -->
                    <div class="modal-footer">
                        <button type="button" class="btn  btn-default btn-warning" data-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>








</body>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript"src="js/bootstrap.min.js"></script>
<!--jquery.min.js要放在bootstrap.min.js的前面，因为bootstrap要依靠jquery-->
<script type="text/javascript" src="js/mainindex.js">	</script>
<script type="text/javascript">
    function refreshLogin(){
        document.getElementById("imgValidateLogin").src="validatelogin.jsp?random="+Math.random();
    }
    function refreshRegister(){
        document.getElementById("imgValidateRegister").src="validateregister.jsp?random="+Math.random();
    }
</script>
</html>
